<template>
  <div>
    <div style="display: flex; justify-content: space-between">
      <div style="display: flex; align-items: center; gap: 2px">
        <el-input
          v-model="searchDTO.name"
          clearable
          style="width: 150px; border-radius: 5px"
          placeholder="请输入教师名称"
        />
        <el-button icon="search" @click="getList" type="success"></el-button>
      </div>
      <el-button type="primary" icon="plus" style="border-radius: 10px" @click="add"
        >添加
      </el-button>
    </div>

    <CommonDialogForm
      v-model:has-loading="loading"
      v-model:visible="dialogAdd"
      v-model:form-params="addDTO"
      :rules="TeacherRules.addRules"
      :item-config="TeacherParams.formColumn"
      :title="'添加教师'"
      :width="'20%'"
      :submit-text="'保存'"
      :chancel-text="'取消'"
      :is-submit="true"
      :close-tips="true"
      @submit="onAdd"
    >
    </CommonDialogForm>

    <CommonDialogForm
      v-model:has-loading="loading"
      v-model:visible="dialogUpdate"
      v-model:form-params="updateDTO"
      :rules="TeacherRules.updateRules"
      :item-config="TeacherParams.formColumn"
      :title="'修改教师'"
      :width="'20%'"
      :submit-text="'保存'"
      :chancel-text="'取消'"
      :is-submit="true"
      :close-tips="true"
      @submit="onUpdate"
    >
    </CommonDialogForm>

    <CommonPageTable
      :table-column="TeacherParams.tableColumn"
      :table-data="searchVO"
      :table-loading="loading"
      :table-attribute="{
        'empty-text': '暂无数据',
        height: TableEnum.height,
      }"
      :page-params="searchDTO.page"
      :page-attribute="{
        size: 'small',
        pageSizes: [10, 20, 50, 100],
        layout: ' total, sizes, prev, pager, next, jumper',
      }"
      @search="getList"
      @update="update"
      @remove="remove"
    />
  </div>
</template>

<script setup lang="ts">
//----------------------------------导入区---------------------------------
import { onMounted, reactive, ref } from 'vue'
import type { ResultPageType } from '@/resources/interface/ResultTypes'
import CommonPageTable from '@/components/CommonPageTable.vue'
import { TableEnum } from '@/enums/TableEnum'
import CommonDialogForm from '@/components/CommonDialogForm.vue'
import ObjectUtils from '@/utils/ObjectUtils'
import { TeacherApi } from '@/apis/api/teacher/TeacherApi'
import { TeacherParams } from '@/resources/parameters/teacher/TeacherParameters'
import type {
  TeacherAddDTOType,
  TeacherSearchDTOType,
  TeacherSearchVOType,
  TeacherUpdateDTOType,
} from '@/resources/interface/teacher/TeacherTypes'
import { TeacherRules } from '@/resources/rules/teacher/TeacherRules'
import ElementUtil from '@/utils/ElementUtil'

//----------------------------------数据区---------------------------------
const loading = ref(false)
const dialogAdd = ref(false)
const dialogUpdate = ref(false)
const searchDTO = reactive<TeacherSearchDTOType>({ ...TeacherParams.searchDTO })
const searchVO = ref<ResultPageType>()
let addDTO = reactive<TeacherAddDTOType>({ ...TeacherParams.addDTO })
let updateDTO = reactive<TeacherUpdateDTOType>({ ...TeacherParams.updateDTO })
// ----------------------------------方法区--------------------------------

/**
 * 添加 教师表 前置
 */
const add = async () => {
  dialogAdd.value = true
}
/**
 * 添加 教师表 回调
 * @param params 表单数据
 */
const onAdd = async (params: TeacherAddDTOType) => {
  await TeacherApi.add(params)
  loading.value = false
  await getList()
  ObjectUtils.resetObject(addDTO, TeacherParams.addDTO)
}
/**
 * 更新 教师表 前置
 * @param vo 选中数据
 */
const update = (vo: TeacherSearchVOType) => {
  updateDTO = reactive(ObjectUtils.copy(vo, updateDTO))
  dialogUpdate.value = true
}
/**
 * 更新 教师表 回调
 * @param params 表单数据
 */
const onUpdate = async (params: TeacherUpdateDTOType) => {
  await TeacherApi.update(params)
  await getList()
}
/**
 * 删除 教师表
 * @param vo 选中数据
 */
const remove = async (vo: TeacherSearchVOType) => {
  if (await ElementUtil.openBox({ content: '是否删除,删除后不可恢复！' })) {
    await TeacherApi.delete(Array.of(vo.id))
    await getList()
  }
}
/**
 * 获取 教师表 列表
 */
const getList = async () => {
  loading.value = true
  const result = await TeacherApi.search(searchDTO)
  searchVO.value = result.data
  loading.value = false
}

onMounted(() => {
  getList()
})
</script>

<style scoped></style>
